<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools 1.3 Documentation - Interface/HtmlTable.Sort</title>
</head>

<body>
  <div class="doc">
    <div class="methods">
      <h4 class="menu-item"><a href="#HtmlTable">HtmlTable</a></h4>
      <div class="menu-item"><a href="#HtmlTable:sort">sort</a></div>
      <div class="menu-item"><a href="#HtmlTable:enableSort">enableSort</a></div>
      <div class="menu-item"><a href="#HtmlTable:disableSort">disableSort</a></div>
      <div class="menu-item"><a href="#HtmlTable:reSort">reSort</a></div>
      <h4 class="menu-item"><a href="#HtmlTable:Parsers">Parsers</a></h4>
      <div class="menu-item"><a href="#"></a></div>
      <div class="menu-item"><a href="#HtmlTable:defineParsers">defineParsers</a></div>
    </div>
    <div class="l-border r-border span-15 content">
      <h1 id="HtmlTable"><a href="#HtmlTable">Class: HtmlTable.Sort</a></h1>
      <p class="description">Makes headers of HtmlTable clickable to sort the rows.</p>
      <h3>Refactors</h3>
      <ul>
        <li><a href="../../../docs/more/Interface/HtmlTable.html">HtmlTable</a></li>
      </ul>
      <h3>Syntax</h3>
      <pre class="javascript"><span class="kw2">new</span> HtmlTable<span class="br0">(</span><span class="br0">[</span>table, options<span class="br0">]</span><span class="br0">)</span>;
</pre>
      <h3>Arguments</h3>
      <ol>
        <li>table - (<em>mixed</em>; optional) - a Table DOM element or it's id; if you do not specify one, one will be created.</li>
        <li>options - (<em>object</em>; optional) a key/value set of options.</li>
      </ol>
      <h3>Options</h3>
      <ul>
        <li>all options defined by <a href="../../../docs/more/Interface/HtmlTable.html">HtmlTable</a>, plus:</li>
        <li>sortIndex - (<em>integer</em>) the row to sort on startup; defaults to <em>0</em>. Set to <em>null</em> if you don't want to sort on startup.</li>
        <li>sortReverse - (<em>boolean</em>) if <em>true</em>, the initial sorted row will be sorted in reverse. Defaults to <em>false</em>.</li>
        <li>parsers - (<em>array</em>) a mapping of parsers for each column of data. See section on parsers below.</li>
        <li>defaultParser - (<em>string</em>) if no parsers are defined and they cannot be auto detected, which parser to use; defaults to 'string'</li>
        <li>classSortable - (<em>string</em>) the class to add to the table when sorting is enabled; defaults to 'table-sortable'</li>
        <li>classHeadSort - (<em>string</em>) the class to add to the th that has the current sort (applied when sort order is forward); defaults to 'table-th-sort'</li>
        <li>classHeadSortRev - (<em>string</em>) the class to add to the th that has the current sort (applied when sort order is reverse); defaults to 'table-th-sort-rev',</li>
        <li>classNoSort - (<em>string</em>) if a th has this class, it will not be sortable; defaults to 'table-th-nosort'</li>
        <li>classGroup - (<em>string</em>) class applied to td elements when more than one has the same value; defaults to 'table-tr-group',</li>
        <li>classGroupHead - (<em>string</em>) class applied to the <em>first</em> td in a group of td elements that have the same value; defaults to 'table-tr-group-head'</li>
        <li>classCellSort - (<em>string</em>) the class applied to td elements that are in the current sorted column. defaults to 'table-td-sort'</li>
        <li>classSortSpan - (<em>string</em>) the class applied to a span element injected into the th headers when sorting is enabled; useful for adding an arrow background for the sorted column to indicate the sort direction. defaults to 'table-th-sort-span'</li>
        <li>sortable - (<em>boolean</em>) enables the sortable feature on invocation. Defaults to <em>false</em>.</li>
      </ul>
      <h3>Events</h3>
      <ul>
        <li>sort - callback executed when a column is sorted; passed the <em>tbody</em> and the index of the column sorted.</li>
      </ul>
      <h3>Note</h3>
      <p>Your Table must have a <em>thead</em> with <em>th</em> elements for each column (these are what the user clicks on to sort stuff). If your table doesn't have headers already, you can specify them with the <em>headers</em> option or use the <em>setHeaders</em> method.</p>
      <h2 id="HtmlTable:sort"><a href="#HtmlTable:sort">HtmlTable Method: sort</a></h2>
      <p class="description">Sorts a column.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myHtmlTable.<span class="me1">sort</span><span class="br0">(</span>index, reverse, prepare<span class="br0">)</span>;
</pre>
      <h3>Arguments</h3>
      <ol>
        <li>index - (<em>integer</em>) the index of the column to sort</li>
        <li>reverse - (<em>boolean</em>) reverses the sort if <em>true</em>; defaults to <em>false</em> </li>
        <li>prepare - (<em>boolean</em>) if the sort has a secondary sort, set this value to <em>true</em> on the first sort, and <em>false</em> on the second. For example, if you sorted a directory list of files first by type and then secondly by file size, you would sort on type and pass <em>true</em> and then sort on size and pass <em>false</em>.</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This instance of HtmlTable.</li>
      </ul>
      <h2 id="HtmlTable:enableSort"><a href="#HtmlTable:enableSort">HtmlTable method: enableSort</a></h2>
      <p class="description">Enables the sortable features of the table.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myTable.<span class="me1">enableSort</span><span class="br0">(</span><span class="br0">)</span>;

</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This instance of HtmlTable.</li>
      </ul>
      <h2 id="HtmlTable:disableSort"><a href="#HtmlTable:disableSort">HtmlTable method: disableSort</a></h2>
      <p class="description">Disables the sortable features of the table.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myTable.<span class="me1">disableSort</span><span class="br0">(</span><span class="br0">)</span>;
</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This instance of HtmlTable.</li>
      </ul>
      <h2 id="HtmlTable:reSort"><a href="#HtmlTable:reSort">HtmlTable method: reSort</a></h2>
      <p class="description">Reapplies the current sort. Note that this is called whenever new rows are added.</p>
      <h3>Syntax</h3>
      <pre class="javascript">myTable.<span class="me1">reSort</span><span class="br0">(</span><span class="br0">)</span>;
</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This instance of HtmlTable.</li>
      </ul>
      <h1 id="HtmlTable:Parsers"><a href="#HtmlTable:Parsers">Hash: HtmlTable.Parsers</a></h1>
      <p class="description">There are numerous parsers used by HtmlTable to determine the sort order of data. A column of numbers, for example, will be sorted numerically, while a column of dates will be sorted by their date order. The <em>HtmlTable.Parsers</em> hash contains a group of objects each with a regular expression and a function applied when that expression matches the content. For example, here is the parser for number:</p>
      <pre class="javascript">HtmlTable.<span class="me1">Parsers</span>.<span class="me1">number</span> = <span class="br0">{</span>
    match: <span class="re0">/^\d+<span class="br0">[</span>^\d.,<span class="br0">]</span>*$/</span>,
    convert: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>

        <span class="kw1">return</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'text'</span><span class="br0">)</span>.<span class="me1">toInt</span><span class="br0">(</span><span class="br0">)</span>;
    <span class="br0">}</span>,
    number: <span class="kw2">true</span>

<span class="br0">}</span>;
</pre>
      <p>You'll note that there's also a <em>number</em> value. Numerical parsers should have this flag for proper sorting. Also note that "this" is bound to the table cell.</p>
      <h2><a href="#">Included Parsers</a></h2>
      <ul class="description">
        <li>date - sorts for date formats that are matched by <a href="../../../docs/more/Types/Date.html#Date:parse">Date.parse</a> </li>
        <li>input-checked - sorts checkbox inputs into those that are checked and are not checked</li>
        <li>input-value - sorts based on the value inside text inputs</li>
        <li>number - sorts on integers</li>
        <li>numberLax - sorts on integer values that might be mixed with other data.</li>
        <li>float - sorts on float values</li>
        <li>floatLax - sorts on float values that might contain other data.</li>
        <li>string - an alpha sort</li>
        <li>title - sorts on the <em>title</em> property of the table data element</li>
      </ul>
      <h2 id="HtmlTable:defineParsers"><a href="#HtmlTable:defineParsers">Static Method: HtmlTable.defineParsers</a></h2>
      <p class="description">Because these parsers in the list above are run in order, adding a custom parser is likely to produce no results, as your table contents will eventually match one of the items above. Therefore there is a static method for adding your own parsers that will put your parser at the top of this list. Example:</p>
      <pre class="javascript">HtmlTable.<span class="me1">defineParsers</span><span class="br0">(</span><span class="br0">{</span>
    foo: <span class="br0">{</span>
        match: <span class="re0">/foo/</span>,
        convert: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>...<span class="br0">}</span>,
        number: <span class="kw2">false</span>

    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>
    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
